<template>
    <div>
        <div id="main2" class="main2_box"></div>
    </div>
</template>

<script setup lang="ts">
import { ECharts, EChartsOption, init } from 'echarts';
import { onMounted } from 'vue';
const props = defineProps({
    data:{
        type:Object,
        defalut:()=>{}
    }
})
onMounted(()=>{
    const {type,data} = props.data
// 表2
const charEle2 = document.getElementById('main2') as HTMLElement;
    const charEch2: ECharts = init(charEle2);
    const option2: EChartsOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data:type
        },
        series: [
            {
                name: data[0].name,
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: data[0].data
            },
            {
                name:  data[1].name,
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data:  data[1].data
            },
            {
                name: data[2].name,
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: data[2].data
            },
            {
                name: data[3].name,
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: data[3].data
            },
            {
                name: data[4].name,
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: data[4].data
            },
            {
                name: data[5].name,
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: data[5].data
            }
        ]
    };
    charEch2.setOption(option2);
})
</script>

<style scoped lang="scss">
.main2_box {
    width: 850px;
    height: 650px;
    // border: 1px solid #ccc;
}
</style>